<template>

  <div class="searchBrandList">
    <div>
      <scroll-view scroll-y="true" :style="{'height':totalHeight+'px'}" scroll-with-animation="true"
                   :scroll-into-view="currentLetter" @scroll="scroll">
        <div class="searchCheck">
          <li v-for="(item,index) in selectBrandList" :key="index" @click="checkBrand(item)">{{item.columnName}}</li>
        </div>

        <div class="hotBrand" v-if="hotBrandList.length > 0">
          <h2>热搜品牌</h2>
          <ul v-for="(hotItem,index) in hotBrandList" :key="index">
            <li :class="[hotItem.checked ? 'brandCheckOn' : '']" @click="checkBrand(hotItem)">{{hotItem.name}}</li>
          </ul>
        </div>
        <ul v-for="(lettersItem,index) in lettersList" :id="[lettersItem == '#' ? 'mini' : lettersItem]" :key="index">
          <h2 style="background: #f2f2f2">{{lettersItem}}</h2>
          <li :class="[brandItem.checked ? 'brandCheckOn' : '']"
              v-for="(brandItem,brandIndex) in letterMap[lettersItem]" :key="brandIndex"
              @click.stop="checkBrand(brandItem)"
              data-index="brandIndex" data-val="brandItem"
              data-types="list"
          >
            {{brandItem.name}}
          </li>
        </ul>
      </scroll-view>
    </div>

    <div class="brand-letter">
      <span class="letterItem" v-for="(letter,index) in lettersList" :key="index" @click="scrollToPosition(letter)"
            data-item="letter">{{letter}}</span>
    </div>

  </div>
</template>

<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  import common from '@/utils/common'
  import Arrayutils from '@/utils/arrayutils'
  import {cateAction2} from '@/store/funnames'

  export default {
    computed: {
      ...mapState('brand2', ['brandList', 'hotBrandList', 'letterMap', 'lettersList']),
      ...mapState('cate2', ['selectBrandList'])
    },
    data() {
      return {
        currentLetter: '',
        totalHeight: 0
      }
    },
    mounted() {
      this.totalHeight = common.getWindowHeight() - 40
    },
    methods: {
      ...mapActions('cate2', ['getGoodsCount']),
      ...mapMutations('cate2', {checkBrandGlobal: cateAction2.ACTION_SELECT_BRAND}),
      checkBrand(item) {
        this.checkBrandGlobal(item)
        this.getGoodsCount()
        this.$root.$eventHub.$emit('requestGoods2', true)
      },
      scrollToPosition(letter) {
        this.currentLetter = letter == '#' ? 'mini' : letter
      },
      scroll(e){
        this.currentLetter = ''
      }
    },
    mounted() {
      console.log('mounted', this.brandData)
    },
    onLoad() {
      this.totalHeight = common.getWindowHeight() - 40;
    }
  };
</script>
<style>

</style>
